<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>角色管理</title>
	<link rel="stylesheet" href="../../jquery-easyui-1.3.6/themes/default/easyui.css" type="text/css"></link>
    <link rel="stylesheet" href="../../css/icons/icon.css" type="text/css"></link>
	<link rel="stylesheet" type="text/css" href="../demo.css"></link>
	<script type="text/javascript" src="../../jquery-easyui-1.3.6/jquery.min.js"></script>
    <script type="text/javascript" src="../../jquery-easyui-1.3.6/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../../jquery-easyui-1.3.6/locale/easyui-lang-zh_CN.js"charset="utf-8"></script>
</head>
<body>
	<table id="dg" class="easyui-datagrid" title="角色管理" style="width:1050px;height:auto"
			data-options="
				iconCls: '',
				singleSelect: true,
				toolbar: '#tb',
				url: 'role_data.json',
				method: 'get',
				onDblClickRow: onDblClickRow,
				
			">
		<thead>
			<tr>
			
				<th data-options="field:'workgroup_code',width:150,align:'center',editor:{
							type:'validatebox',
							options:{
								valueField:'workgroup_code',
								required:true
							}
						}">工作组代码</th>
				<th data-options="field:'workgroup_name',width:150,align:'center',editor:{
							type:'validatebox',
							options:{
								valueField:'workgroup_code',
								required:true
							}
						}">工作组名称</th>
				<th data-options="field:'operate',width:700,align:'center',method:'get',
						formatter:function(value,row){
							return row.operatename;
						},
						editor:{
							type:'combotree',
							options:{
								multiple:true,
								url:'role_combotree.json',
								
							}
						}">权限选择</th>
			</tr>
		</thead>
	</table>

	<div id="tb" style="height:auto">
		<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="append()">增加</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="removeit()">删除</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" onclick="accept()">保存</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-undo',plain:true" onclick="reject()">取消</a>
	</div>
	
	<script type="text/javascript">
		var editIndex = undefined;
		function endEditing(){
			if (editIndex == undefined){return true}
			if ($('#dg').datagrid('validateRow', editIndex)){
				var ed = $('#dg').datagrid('getEditor', {index:editIndex,field:'operate'});
				var operatename = $(ed.target).combobox('getText');
				$('#dg').datagrid('getRows')[editIndex]['operatename'] = operatename;
				$('#dg').datagrid('endEdit', editIndex);
				editIndex = undefined;
				return true;
			} else {
				return false;
			}
		}
		function onDblClickRow(index){
			if (editIndex != index){
				if (endEditing()){
					$('#dg').datagrid('selectRow', index)
							.datagrid('beginEdit', index);
					editIndex = index;
				} else {
					$('#dg').datagrid('selectRow', editIndex);
				}
			}
		}
		function append(){
			if (endEditing()){
				$('#dg').datagrid('appendRow',{status:'P'});
				editIndex = $('#dg').datagrid('getRows').length-1;
				$('#dg').datagrid('selectRow', editIndex)
						.datagrid('beginEdit', editIndex);
			}
		}
		function removeit(){
		    $.messager.alert('系统提示', '您确定要删除当前选择的所有项吗?', 'info',function(r) {
			if (editIndex == undefined){return}
			$('#dg').datagrid('cancelEdit', editIndex)
					.datagrid('deleteRow', editIndex);
			editIndex = undefined;})
		}
		function accept(){
			if (endEditing()){
				$('#dg').datagrid('acceptChanges');
			}
		}
		function reject(){
			$('#dg').datagrid('rejectChanges');
			editIndex = undefined;
		}
		function getChanges(){
			var rows = $('#dg').datagrid('getChanges');
			alert(rows.length+' rows are changed!');
		}
	</script>
</body>
</html>